<template>
  <div class="lsh-box">
    <div class="lsh-canvas" id="canvasBox" :style="{ position: 'absolute' }">
      <div class="lsh-tool-list">
        <button class="lsh-pen-btn" @click="startPen = !startPen">
          {{ startPen ? '关闭' : '开启' }}画笔
        </button>
        <button class="lsh-pen-btn" @click="clear()">
          清除
        </button>
      </div>
    </div>
    <div class="lsh-page">
      背景内容
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref, onMounted } from 'vue';
import { Leafer, PointerEvent, Line} from 'leafer-ui'
import { ScrollBar } from '@leafer-in/scroll'
import '@leafer-in/viewport' 

let app: Leafer;
const startPen = ref(true);
let isDrawing = false;
let line: Line;
const init = () => {
  app = new Leafer({
    view: 'canvasBox',
    smooth: true,
    pointer: { touch: true },
    touch: { preventDefault: true },
    type: 'viewport' // 添加视口 //
  });
  app.on([PointerEvent.DOWN], (e) => {
    if (startPen.value) {
      isDrawing = true;
      const { x, y } = e.getPagePoint();
      line = new Line({
        curve: true,
        points: [x, y],
        strokeWidth: 5,
        stroke: 'rgb(50,205,121)'
      })
      app.add(line)
    }
  });

  app.on([PointerEvent.MOVE], (e) => {
    if (isDrawing && startPen.value) {
    const { x, y } = e.getPagePoint();
      line.set({
        points: [...line.points, x, y],
      })
    }
  });

  app.on([PointerEvent.UP], (e) => {
    if (isDrawing && startPen.value) {
      isDrawing = false;
    }
  });
}
const clear = () => {
  app.clear()
}
onMounted(() => {
  init();
})


</script>
<style scoped lang='less' >
.lsh-box {
  position: relative;
  width: 100vw;
  height: 100vh;

  .lsh-canvas {
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: 9999;
    background-color: transparent;
    // padding: 20px;

    .lsh-tool-list {
      position: absolute;
      display: flex;
      gap: 20px;
      z-index: 1;

      .lsh-pen-btn {
        cursor: pointer;
      }
    }
  }

  .lsh-page {
    width: 100%;
    height: 100%;
    background-color: #c2650e;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>